<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center creatorder_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub creatorder_fd0_0'>
          <view class='flex flex-wrap align-center creatorder_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  huishoushuju_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
              data-url="1">&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='creatorder_fd0_0_c1_c0'>出库调拨</text>
          </view>
          <view class='flex flex-wrap align-center justify-end creatorder_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---申请售后-售后原因flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout creatorder_flex_1">

        <view class='flex align-center justify-between creatorder_fd1_0' @click="iscate=true">
          <view class='flex flex-wrap align-center'>
            <text class='creatorder_fd1_0_c0_c0'>*</text>
            <text class='creatorder_fd1_0_c0_c1'>请选择转运点</text>
          </view>
          <view class='flex flex-wrap align-center justify-center creatorder_fd1_0_c1'>
            <text>{{cate_name || '请选择'}}</text>
            <text class='fu-iconfont2  creatorder_fd1_0_c1_c1'>&#xe78a;</text>
          </view>
        </view>


        <view class='flex align-center justify-between creatorder_fd1_0'>
          <view class='flex flex-wrap align-center'>
            <text class='creatorder_fd1_0_c0_c0'>*</text>
            <text class='creatorder_fd1_0_c0_c1'>转出数量(当前数量：{{total_number}})</text>
          </view>
          <benben-input class='flex-sub creatorder_fd1_2_c2' type="digit" :placeholder="`请输入`" confirm-type="done"
            placeholder-style="color:#999;font-size:28rpx" v-model="number" />
        </view>


        <view>
          <view class='flex align-center justify-between creatorder_fd1_0' style="border: none;">
            <view class='flex flex-wrap align-center'>
              <text class='creatorder_fd1_0_c0_c0'>*</text>
              <text class='creatorder_fd1_0_c0_c1'>上传类型</text>
            </view>
            <view class="flex align-center">
              <view class="flex align-center chooseCheck" @click="chooseZhuan('1')">
                <image class='loginPage_checkfd1_5_c0_c0_c0' v-if="grass_type==1" mode="aspectFit"
                  :src='STATIC_URL+"3.png"'></image>
                <image class='loginPage_checkfd1_5_c0_c0_c0' v-else mode="aspectFit" :src='STATIC_URL+"31.png"'></image>
                <view class="margin-left-sm">图片</view>
              </view>
              <!-- <view class="flex align-center chooseCheck" @click="chooseZhuan('2')">
                <image class='loginPage_checkfd1_5_c0_c0_c0' v-if="grass_type==2" mode="aspectFit"
                  :src='STATIC_URL+"3.png"'></image>
                <image class='loginPage_checkfd1_5_c0_c0_c0' v-else mode="aspectFit" :src='STATIC_URL+"31.png"'></image>
                <view class="margin-left-sm">视频</view>
              </view> -->
            </view>
          </view>
          <benben-images-upload v-if="grass_type==1" ref="benbenImagesUploadfd3_0_c0" :img-list.sync="imgList"
            :img-ids.sync="imgid" :maxlength="9">
            <template #content="{ num, maxlength, isShow}">
              <view class="flex flex-wrap align-start flex PublishCommunity_fd3_0_c0">

                <view v-for="(image, index) in imgList" :key="index"
                  class='flex position-relative PublishCommunity_fd3_0_c00'>
                  <text class='fu-iconfont2 position-absolute PublishCommunity_fd3_0_c000'
                    @tap.stop="$refs.benbenImagesUploadfd3_0_c0.delImage(index)">&#xE8E7;</text>
                  <image class='PublishCommunity_fd3_0_c001'
                    @tap.stop="$refs.benbenImagesUploadfd3_0_c0.previewImage(index)" mode="aspectFill" :src='image'>
                  </image>
                </view>

                <image class='PublishCommunity_fd3_0_c01' @tap.stop="$refs.benbenImagesUploadfd3_0_c0.manyChooseImage()"
                  v-if="isShow" mode="aspectFit" :src='STATIC_URL+"36.png"'></image>

              </view>
            </template>
          </benben-images-upload>
          <benben-video-upload v-if="grass_type==2" ref="upload1722930228458" :src.sync="uploadvideo"
            :video-id.sync="uploadvideo" :name.sync="uploadvideoname">
            <template v-slot="{src, poster}">
              <view class='flex position-relative' style="width: 200rpx;height:200rpx">
                <image class='PublishCommunity_fd3_1_c0' mode="aspectFill"
                  @tap="$refs.upload1722930228458.previewVideo()"
                  :src="src?src + '?x-oss-process=video/snapshot,t_1000,m_fast':STATIC_URL+'36.png'"></image>

                <text class='fu-iconfont2 position-absolute PublishCommunity_fd3_1_c1'
                  @tap="$refs.upload1722930228458.delVideo()" v-if="src">&#xE8E7;</text>

              </view>
            </template></benben-video-upload>



        </view>

        <view class='flex align-center creatorder_fd1_0' style="border: none;">
          <text class='creatorder_fd1_0_c0_c1'>备注</text>
        </view>
        <view class='flex-direction flex-wrap align-stretch flex creatorder_fd1_3'>
          <textarea class='flex-sub creatorder_input_fd1_3' confirm-type="done" :placeholder="'请输入备注'" :maxlength="200"
            :show-num='true' placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="remark_15370" />
          <template>
            <view class='flex flex justify-end creatorder_numberfd1_3_c0'>
              <text class='creatorder_numberfd1_3_c0_c0'>{{remark_15370.length}}</text>
              <text class='creatorder_numberfd1_3_c0_c0'>/</text>
              <text class='creatorder_numberfd1_3_c0_c0'>200</text>
            </view>
          </template>
        </view>
        <view class='flex flex-wrap align-center justify-center creatorder_fd1_5'>
          <button class='creatorder_fd1_5_c0' @tap.stop="submitRefundFunc()">提交</button>
        </view>
      </view>

      <!---申请售后-售后原因flex布局结束-->
      <view class="flex flex-wrap align-center justify-center benben-position-layout flex creatorder_flex_2"
        @click.stop="submitforcertificationFunc">
        <button class='creatorder_fd2_0'>提交</button>

      </view>
      <view :style="{height: '201rpx'}"></view>


    </view>
    <benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1706077549149"
      :label.sync='freerecyclingtype_name' :value.sync='freerecyclingtype_id' :options='sex_options' mode='selector'
      :mask-show='true' :timeout='true' :picker-height='88' default-type='aid'
      :default-props='{"label":"name","value":"aid"}'>
      <template #picker-header>
        <view class='flex flex-wrap align-center justify-between personalData_picker2_0'>
          <text class='personalData_picker2_0_c0' @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</text>
          <text class='personalData_picker2_0_c1'>选择型号</text>
          <text class='personalData_picker2_0_c2' @tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确认</text>
        </view>
      </template>
    </benben-picker>
    <benben-picker ref="benbenWritePickerCodepicker3" :visible.sync="isbrand" :label.sync='brand_name'
      :value.sync='brand' :options='brandList' mode='selector' :mask-show='true' :timeout='true' :picker-height='88'
      default-type='name' :default-props='{"label":"name","value":"aid"}'>
      <template #picker-header>
        <view class='flex flex-wrap align-center justify-between personalData_picker2_0'>
          <text class='personalData_picker2_0_c0' @tap="$refs.benbenWritePickerCodepicker3.cancel()">取消</text>
          <text class='personalData_picker2_0_c1'>选择品牌</text>
          <text class='personalData_picker2_0_c2' @tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()">确认</text>
        </view>
      </template>
    </benben-picker>
    <benben-picker ref="benbenWritePickerCodepicker4" :visible.sync="iscate" :label.sync='cate_name' :value.sync='cate'
      :options='cateList' mode='selector' :mask-show='true' :timeout='true' :picker-height='88' default-type='aid'
      :default-props='{"label":"name","value":"aid"}'>
      <template #picker-header>
        <view class='flex flex-wrap align-center justify-between personalData_picker2_0'>
          <text class='personalData_picker2_0_c0' @tap="$refs.benbenWritePickerCodepicker4.cancel()">取消</text>
          <text class='personalData_picker2_0_c1'>选择转运点</text>
          <text class='personalData_picker2_0_c2' @tap="$refs.benbenWritePickerCodepicker4.pickerConfirm()">确认</text>
        </view>
      </template>
      <benben-picker ref="benbenWritePickerCodepicker5" :visible.sync="istype" :label.sync='type_name'
        :value.sync='type_no' :options='typeList' mode='selector' :mask-show='true' :timeout='true' :picker-height='88'
        default-type='name' :default-props='{"label":"name","value":"aid"}'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between personalData_picker2_0'>
            <text class='personalData_picker2_0_c0' @tap="$refs.benbenWritePickerCodepicker5.cancel()">取消</text>
            <text class='personalData_picker2_0_c1'>选择型号</text>
            <text class='personalData_picker2_0_c2' @tap="$refs.benbenWritePickerCodepicker5.pickerConfirm()">确认</text>
          </view>
        </template>
      </benben-picker>
    </benben-picker>
    <!-- <benben-picker ref="benbenWritePickerCodepicker1" :visible.sync="pickerDiy1703520610264" :times.sync="half"
      mode='time' :picker-height='88' :current='true' :mask-show='true' fields='day' :timeout='true' start-year='现在'
      end-year='' from-data=''>
      <template #picker-header>
        <view class='flex flex-wrap align-center justify-between personalData_picker2_0'>
          <text class='personalData_picker2_0_c0' @tap="$refs.benbenWritePickerCodepicker1.cancel()">{{$t('取消')}}</text>
          <text>选择上门时间</text>
          <text class='personalData_picker2_0_c2'
            @tap="$refs.benbenWritePickerCodepicker1.pickerConfirm()">{{$t('确认')}}</text>
        </view>
      </template>
    </benben-picker> -->
    <junjun-detepicker ref="datetimePicker" v-model="value" mode="datetime" @submit="confirm">
    </junjun-detepicker>
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  import amapFile from '@/libs/amap-wx.js';

  export default {



    data() {
      return {
        value: Number(new Date()),
        pickerDiy1703520610264: false,
        sex_options: [],
        pickerDiy1706077549149: false,
        number: '1',
        address: '',
        detail_address: '',
        time: '',
        lat: '',
        lng: '',
        freerecyclingtype_id: '',
        freerecyclingtype_name: '',
        user_id_2: '',
        user_name: '',
        user_avatar: '',
        brand: '',
        brand_name: '',
        cate: '',
        cate_name: '',
        type_no: "",
        type_name: "",
        isbrand: false,
        iscate: false,
        istype: false,
        brandList: [],
        cateList: [],
        typeList: [],
        remark_15370: '',
        guji_wghit: '',
        certified: '',
        uploadvideo: '',
        uploadvideoname: '',
        grass_type: 1,
        "imgList": [],
        "imgid": "",
        xitongbumen: '',
        total_number: '',
        aid: ''
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      }
    },
    watch: {},
    onLoad(options) {
      let {
        aid
      } = options
      if (aid !== undefined) this.aid = aid
      if (this.aid) {
        this.getDetail()
      }
      this.getList()
      this.myAmapFun = new amapFile.AMapWX({
        key: '994797a4a0bf876f4ad7a31d27ed0070'
      });
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      if (this.isLogin) {
        this.$api.get(global.apiUrls.post5c78c4772da97, {

        }).then(res => {
          this.certified = res.data.data.certified
          this.xitongbumen = res.data.data.xitongbumen
          this.total_number = res.data.data.total_number
        })
      }
      uni.$on('fhifu', data => {
        this.user_id_2 = data.id
        this.user_name = data.nickname
        this.user_avatar = data.avatar

      })
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      getDetail() {
        this.$api.post(global.apiUrls.post66ea839d775bc, {
          aid: this.aid
        }).then(res => {
          if (res.data.code == 1) {
            this.cate_name = res.data.data.xitongbumen1_name
            this.cate = res.data.data.xitongbumen1
            this.xitongbumen = res.data.data.xitongbumen
            this.number = res.data.data.num

            this.remark_15370 = res.data.data.remark
            this.grass_type = res.data.data.is_thumb
            if (this.grass_type == 1) {
              this.imgList = res.data.data.wenjianshangchuan.split(',')
              this.imgid = res.data.data.wenjianshangchuan
            }
            if (this.grass_type == 2) {
              this.uploadvideo = res.data.data.wenjianshangchuan
            }
          }
        })
      },
      open() {
        this.$refs.datetimePicker.show();
      },
      confirm(e) {
        console.log('confirm', e);
        this.time = e.format
      },
      chooseMap() {
        let _this = this
        console.log('_this_this_this_this_this')
        uni.chooseLocation({
          success: (resule) => {
            console.log(resule, '地图');
            _this.lng = resule.longitude
            _this.lat = resule.latitude
            _this.$api.post(global.apiUrls.post65e6b89a95efe, {
              lng: _this.lng,
              lat: _this.lat,
            }).then(res => {
              if (res.data.code == 1) {
                _this.address = res.data.data.province + res.data.data.city + res.data.data.district +
                  res.data.data.township
              }
            })
            // _this.myAmapFun.getRegeo({
            //   location: resule.longitude + ',' + resule.latitude,
            //   success: (data) => {
            //     //成功回调
            //     let regeoData = data[0].regeocodeData.addressComponent;
            //     let location_city = regeoData.city.length ? regeoData.city : '';
            //     let location_province = regeoData.province;
            //     let location_district = regeoData.district;
            //     console.log(_this.location_province, '回调');
            //     _this.address = location_city + location_province + location_district +
            //       resule.name
            //   },
            //   fail: (info) => {
            //     //失败回调
            //     console.log('info111', info)
            //   }
            // })
          },
          fail: (info) => {
            //失败回调
            console.log('info111', info)
          }
        })
      },
      getList() {
        this.$api.post(global.apiUrls.post659e7205002a7).then(res => {
          if (res.data.code == 1) {
            this.sex_options = res.data.data
            this.freerecyclingtype_name = this.sex_options[0].name
            this.freerecyclingtype_id = this.sex_options[0].aid
          }
        })
        // this.$api.post(global.apiUrls.post65f2bbe3f1a2a).then(res => {
        //   if (res.data.code == 1) { //电池品牌
        //     this.brandList = res.data.data
        //     this.brand_name = this.brandList[0].name
        //     this.brand = this.brandList[0].aid
        //   }
        // })
        this.$api.post(global.apiUrls.post66ea6c1119bec).then(res => {
          if (res.data.code == 1) { //获取转运点
            this.cateList = res.data.data
            if (!this.aid) {
              this.cate_name = this.cateList[0].name
              this.cate = this.cateList[0].aid
            }

          }
        })
        // this.$api.post(global.apiUrls.post65f2bc161f005).then(res => {
        //   if (res.data.code == 1) { //电池型号
        //     this.typeList = res.data.data
        //     this.type_name = this.typeList[0].name
        //     this.type_no = this.typeList[0].aid
        //   }
        // })
      },
      chooseZhuan(type) {
        this.grass_type = type
      },
      //提交认证信息
      async submitforcertificationFunc() {
        // if (this.certified != '1') {
        //   this.$message.info('你未认证 请前往认证');
        //   setTimeout(res1 => {
        //     uni.navigateTo({
        //       url: '/pages/grzx/yonghurenzheng/yonghurenzheng'
        //     })
        //   }, 500)
        //   return false;
        // }

        if (!validate(this.cate_name, 'require')) {
          this.$message.info('请选择转运点');
          return false;
        }
        if (!validate(this.number, 'require')) {
          this.$message.info('请输入转出数量');
          return false;
        }
        let wenjianshangchuan = ''
        if (this.grass_type == 1) {
          if (this.imgList.length == 0) {
            this.$message.info('请上传相关图片');
            return false;
          }
          wenjianshangchuan = this.imgList.join(',')
        }
        if (this.grass_type == 2) {
          if (!this.uploadvideo) {
            this.$message.info('请上传相关视频');
            return false;
          }
          wenjianshangchuan = this.uploadvideo
        }
        //请求方法
        //数据验证

        let data = await this.$api.post(global.apiUrls.post66ea6c7969258, {
          aid: this.aid,
          xitongbumen: this.xitongbumen,
          xitongbumen1: this.cate,
          num: this.number,
          wenjianshangchuan: wenjianshangchuan,
          remark: this.remark_15370,
          is_thumb: this.grass_type
        });
        if (data.data.code != 1) {
          this.$message.info(data.data.msg);
          return
        }
        this.$message.info('提交成功');
        setTime(res => {
          uni.navigateBack()
        }, 500)

        // uni.switchTab({
        //   url: '/pages/tabBar/orderList/orderList'
        // })
        // this.getList()
      },
    }
  };
</script>
<style lang="scss" scoped>
  .loginPage_checkfd1_5_c0_c0_c0 {
    width: 32upx;
    height: 32upx;
  }

  .chooseCheck {
    width: 150rpx;
  }

  .PublishCommunity_fd3_1_c0 {
    width: 164rpx;
    height: 164rpx;
  }

  .PublishCommunity_fd3_1_c1 {
    width: 164rpx;
    height: 164rpx;
  }

  .PublishCommunity_fd3_0_c01 {
    width: 164rpx;
    height: 164rpx;
    margin: 0rpx 24rpx 24rpx 0rpx;
  }

  .PublishCommunity_fd3_0_c001 {
    width: 164rpx;
    height: 164rpx;
  }

  .PublishCommunity_fd3_0_c000 {
    top: 0rpx;
    right: 0rpx;
    z-index: 10;
    color: rgba(235, 53, 41, 1);
  }

  .PublishCommunity_fd3_0_c00 {
    margin: 0rpx 24rpx 24rpx 0rpx;
  }

  .PublishCommunity_fd3_0_c0 {
    width: 650rpx;
    padding: 24rpx 0rpx 0rpx 24rpx;
  }

  .huishoushuju_fd0_0_c0_c0 {
    // color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
    line-height: 28rpx;
  }

  .personalData_picker2_0_c2 {
    color: var(--benbenFontColor6);
    font-size: 28rpx;
  }

  .personalData_picker2_0_c1 {
    font-size: 32rpx;
    color: var(--benbenFontColor1);
  }

  .personalData_picker2_0_c0 {
    font-size: 28rpx;
    color: var(--benbenFontColor2);
  }

  .personalData_picker2_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #F8F8F8;
    background-size: 100% auto;
  }

  .creatorder_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .creatorder_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .creatorder_fd0_0_c0 {
    width: 120rpx;
  }

  .creatorder_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .creatorder_flex_1 {
    background: rgba(255, 255, 255, 1);
    border-radius: 16rpx;
    background-size: 100% auto;
    padding: 24rpx;
    margin: 24rpx;
  }

  .creatorder_fd1_6_c1_c2 {
    color: var(--benbenFontColor2);
    font-size: 24rpx;
  }

  .creatorder_fd1_6_c1_c1 {
    margin: 0rpx 12rpx 0rpx 12rpx;
    color: rgba(16, 51, 126, 1);
  }

  .creatorder_fd1_6_c1_c0 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 100rpx;
  }

  .creatorder_fd1_6 {
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .creatorder_fd1_5_c0 {
    background: var(--benbenbgColor4);
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    color: var(--benbenFontColor3);
    width: 686rpx;
    height: 88rpx;
    line-height: 88rpx;
  }

  .creatorder_fd1_5 {
    position: fixed;
    bottom: calc(30rpx + var(--window-bottom));
    left: 0rpx;
    width: 750rpx;
    height: 88rpx;
  }

  .creatorder_numberfd1_3_c0_c0 {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(191, 191, 191, 1);
  }

  .creatorder_numberfd1_3_c0 {
    width: 100%;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 42rpx;
    font-weight: 400;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .creatorder_input_fd1_3 {
    width: 100%;
    height: 140rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: var(--benbenFontColor0);
  }

  .creatorder_fd1_3 {
    background: #F8F8F8;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 24rpx 24rpx 0rpx 24rpx;
    height: 272rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .creatorder_fd1_2_c2 {
    text-align: right;
    font-size: 28rpx;
    font-weight: 400;
    color: #333;
  }

  .creatorder_fd1_1_c1_c0 {
    height: 50rpx;
    margin: 0rpx 4rpx 0rpx 4rpx;
    width: 50rpx;
  }

  ::v-deep .creatorder_numberBoxInputfd1_1_c1 {
    background: rgba(255, 255, 255, 1);
    width: 80rpx;
    height: 50rpx;
    text-align: center;
    color: #323232;
    font-size: 28rpx;
  }

  .creatorder_fd1_0_c1_c1 {
    color: var(--benbenFontColor2);
    font-size: 12rpx;
    margin: 0rpx 0rpx 0rpx 12rpx;
  }

  .creatorder_fd1_0_c1 {
    background: #F6F7F9;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    width: 210rpx;
    height: 64rpx;
  }

  .creatorder_fd1_0_c0_c1 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
  }

  .creatorder_fd1_0_c0_c0 {
    color: rgba(242, 43, 41, 1);
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
  }

  .creatorder_fd1_0 {
    border-bottom: 1px solid #eee;
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .creatorder_flex_2 {
    background: #fff;
    width: 750rpx;
    height: 201rpx;
    overflow: hidden;
    z-index: 10;
    bottom: calc(0rpx + var(--window-bottom));
    background-size: 100% auto !important;
  }

  .creatorder_fd2_0 {
    border: 1px solid rgba(0, 0, 0, 0);
    background: var(--benbenbgColor4);
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    color: #fff;
    width: 686rpx;
    height: 88rpx;
    line-height: 80rpx;
    font-weight: 500;
  }
</style>
